<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Photo Library</title>
    <link rel="stylesheet" href="css/10.css" type="text/css" />
    <style type="text/css">
     
      
    </style>
    <script language="javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript">

    $(function(){

      $.ajax({
            url : "http://zhaiyan.acman.cn/api",
            type : 'GET',
            dataType : 'json',
            success : function(data){
                alert(data.zhaiyan)
            }
        })

      $('div.photo').hover(function() {
       $(this).find('.details')
       .fadeIn('fast');
       // .animate({
       //   opacity: 0.3,
       //  },
       //   'fast');

      }, function() {
        $(this).find('.details').fadeOut('fast');
      });

    })
    </script>
  </head>
  <body>
    <div id="container">
      <h1>Photo Gallery</h1>

      <div id="gallery">
        <div class="photo">
          <img src="images/photos/skyemonroe.jpg">
          <div class="details">
            <div class="description">The Cuillin Mountains, Isle of Skye, Scotland.</div>
            <div class="date">12/24/2000</div>
            <div class="photographer">Alasdair Dougall</div>
          </div>
        </div>
        <div class="photo">
          <img src="images/photos/dscn1328.jpg">
          <div class="details">
            <div class="description">Mt. Ruapehu in summer</div>
            <div class="date">01/13/2005</div>
            <div class="photographer">Andrew McMillan</div>
          </div>
        </div>
        <div class="photo">
          <img src="images/photos/024.JPG">
          <div class="details">
            <div class="description">midday sun</div>
            <div class="date">04/26/2011</div>
            <div class="photographer">Jaycee Barratt</div>
          </div>
        </div>
        <div class="photo">
          <img src="images/photos/dsc20040321_191051_23.jpg">
          <div class="details">
            <div class="description">Dark sunset sky tones</div>
            <div class="date">03/21/2004</div>
            <div class="photographer">Leon Brooks</div>
          </div>
        </div>
        <div class="photo">
          <img src="images/photos/portland_178.jpg">
          <div class="details">
            <div class="description">Mt. Shasta, Weed, CA</div>
            <div class="date">06/16/2004</div>
            <div class="photographer">Brian Lopez</div>
          </div>
        </div>
        <div class="photo">
          <img src="images/photos/michelle_229.jpg">
          <div class="details">
            <div class="description">Mountain with tree cover on foothills</div>
            <div class="date">09/28/2004</div>
            <div class="photographer">Brian Lopez</div>
          </div>
        </div>
        <div class="photo">
          <img src="images/photos/100_0207.JPG">
          <div class="details">
            <div class="description">Poas Volcano, Caldera and Poor Man's Umbrella</div>
            <div class="date">01/02/2004</div>
            <div class="photographer">Nat Edwards</div>
          </div>
        </div>
        <div class="photo">
          <img src="images/photos/DSC01281.JPG">
          <div class="details">
            <div class="description">Mt Compas, South Australia</div>
            <div class="date">01/01/2007</div>
            <div class="photographer">Rod Conlon</div>
          </div>
        </div>
        <div class="photo">
          <img src="images/photos/004_001.JPG">
          <div class="details">
            <div class="description">Waterfall on the outskirts of Highlands N.C.</div>
            <div class="date">11/21/2008</div>
            <div class="photographer">Neal Floyd</div>
          </div>
        </div>
      </div>
      <a id="more-photos" href="pages/1.html">More Photos</a>
    </div>
  </body>
</html>
